<template>
	<view >
		<!-- 未实名认证 -->
		<view class="content" v-if="userInfo.status == 1">
			<view class="certificationContent">
				<view class="certificationTitle">
					<!-- <image src="/static/certification/images/certificationTitleImg_3.jpg" mode="scaleToFill" border="0"
						class="certificationTitleImg"></image>
					<text decode="true" class="certificationTitleText">实名认证</text> -->
				</view>
				<view class="certificationName">
					<text decode="true" class="certificationInputName">姓名</text>
					<input v-model="userName" placeholder="填写您的真实姓名" class="realname" />
				</view>
				<view class="certification_10"> </view>
				<view class="certificationIdCard">
					<text decode="true" class="certificationInputIdCard">身份证</text>
					<input v-model="idCard" placeholder="填写您的真实身份证号码" class="IDCardNo" />
				</view>
				<view class="certification_14"> </view>
				<view class="certificationNoIdCard">
					<text decode="true" class="certificationNoIdCardText">认证不成功?</text>
					<text decode="true" class="certificationNoIdCardTextUpload">点这里,上传身份证进行认证</text>
				</view>
				<button class="certification_19" @click="certificationByNameAndIdCard()">开始验证</button>
				<view class="certificationTitle0">
					<checkbox value="1" class="chkAgree"> </checkbox>
					<text decode="true" class="certificationTitle2">我已阅读并同意</text>
					<text decode="true" class="certificationTitle3">《合同在线签协议》</text>
				</view>
			</view>
		
			<!-- <view class="loading">{{loadingText}}</view>
			<view class="ymBbottom"></view> -->
		</view>
		<!-- 已实名认证 -->
		<view v-else>
			
			<view class="middleContent">
				<u-icon name="checkmark-circle-fill" color="#5AC725" size="70"></u-icon>
				<view class="allReadyCertification">您已经通过实名认证！</view>
			</view>
		</view>
	</view>
	
</template>

<script>
	import {mapState} from 'vuex'
	import isEmpty from '../../utils/someUtils.js'
	export default {
		data() {
			return {
				idCard: "",
				userName: "",
				mobile: "",
				isCertification: true,
				// userInfo: {}
			}
	
		},
		created() {
			
		},
		computed: {
			...mapState(['isAuth', 'userInfo'])
		},
		methods: {
			// 实名认证的方法
			async certificationByNameAndIdCard() {
				let dataForm = {
					idCard: this.idCard,
					userName: this.userName,
					mobile: this.mobile
				}
				const response = await this.$api.my.certification(dataForm);
				console.log('数据结果', response)
				if (response.msg == 'success') {
					uni.showModal({
					        title: '提示',
					        content: '认证成功',
					        showCancel: false,
					        confirmText: '确定',
					        success(res) {
					          if (res.confirm) {
					            console.log('用户点击了确定')
								uni.switchTab({
									 	url: '/pages/tabbar/my',
								});
					          }
					        }
						})
				}
			}
		
		
		
		}
	}
</script>

<style lang="scss">
		.allReadyCertification {
			color: #5AC725;
			font-size: 30rpx;
		}
		.middleContent {
			display: flex;
			justify-content: center;
			align-items: center;
			flex-direction: column;
			width: 600rpx;
			height: 400rpx;
				
		}
		page {
			display: flex;
			justify-content: center;
			align-content: center;
			background-color: #ffffff;
		}
		button::after {
			border: none;
			width: auto;
		}

		input {
			outline: none;
			border: none;
			list-style: none;
			width: auto;
		}

		.list_item {
			float: left;
		}

		.ym_hide {
			display: none;
		}

		.ym_show {
			display: block;
		}

		.slide-image {
			width: 100%;
			height: 100%;
		}

		.list_horizontal {
			width: auto;
			display: inline-block;
		}

		.certificationContent {
			white-space: normal;
			width: 749upx;
			height: 1289upx;
			padding: 0upx;
			clear: both;
			float: left;
			text-align: left;
			border-radius: 0upx;
			font-size: 8upx;
		}

		.certificationContent .certificationTitle {
			white-space: normal;
			width: 749upx;
			height: 94upx;
			padding: 0upx;
			clear: both;
			margin-top: 0upx;
			margin-left: 0upx;
			float: left;
			text-align: left;
			border-radius: 0upx;
			font-size: 38upx;
			line-height: 67upx;
		}

		.certificationContent .certificationTitle .certificationTitleImg {
			white-space: normal;
			width: 24upx;
			height: 40upx;
			padding: 0upx;
			margin-top: 27upx;
			margin-left: 25upx;
			float: left;
			text-align: left;
			border-radius: 0upx;
			font-size: 38upx;
			line-height: 40upx;
		}

		.certificationContent .certificationTitle .certificationTitleText {
			white-space: normal;
			width: 149upx;
			height: 46upx;
			padding: 0upx;
			margin-top: 25upx;
			margin-left: 249upx;
			float: left;
			background-color: #ffffff;
			text-align: left;
			border-radius: 0upx;
			color: #000000;
			font-size: 34upx;
			line-height: 46upx;
		}

		.certificationContent .certificationName {
			white-space: normal;
			width: 695upx;
			height: 41upx;
			padding: 0upx;
			clear: both;
			margin-top: 27upx;
			margin-left: 26upx;
			float: left;
			text-align: left;
			border-radius: 0upx;
			font-size: 27upx;
			line-height: 41upx;
		}

		.certificationContent .certificationName .certificationInputName {
			white-space: normal;
			width: 72upx;
			height: 41upx;
			padding: 0upx;
			margin-top: 0upx;
			margin-left: 0upx;
			float: left;
			background-color: #ffffff;
			text-align: left;
			border-radius: 0upx;
			color: #000000;
			font-size: 25upx;
			line-height: 41upx;
		}

		.certificationContent .certificationName .realname {
			white-space: normal;
			width: 540upx;
			height: 41upx;
			min-height: 41upx;
			padding: 0upx;
			margin-top: 0upx;
			margin-left: 72upx;
			float: left;
			background-color: #ffffff;
			text-align: left;
			border-radius: 0upx;
			color: #c8c8c8;
			font-size: 27upx;
			line-height: 41upx;
		}

		.certificationContent .certification_10 {
			white-space: normal;
			width: 697upx;
			height: 2upx;
			padding: 0upx;
			clear: both;
			margin-top: 24upx;
			margin-left: 25upx;
			float: left;
			background-color: #e1e1e1;
			text-align: left;
			border-radius: 0upx;
			font-size: 1upx;
			line-height: 2upx;
		}

		.certificationContent .certificationIdCard {
			white-space: normal;
			width: 695upx;
			height: 41upx;
			padding: 0upx;
			clear: both;
			margin-top: 26upx;
			margin-left: 26upx;
			float: left;
			text-align: left;
			border-radius: 0upx;
			font-size: 27upx;
			line-height: 41upx;
		}

		.certificationContent .certificationIdCard .certificationInputIdCard {
			white-space: normal;
			width: 129upx;
			height: 41upx;
			padding: 0upx;
			margin-top: 0upx;
			margin-left: 0upx;
			float: left;
			background-color: #ffffff;
			text-align: left;
			border-radius: 0upx;
			color: #000000;
			font-size: 27upx;
			line-height: 41upx;
		}

		.certificationContent .certificationIdCard .IDCardNo {
			white-space: normal;
			width: 540upx;
			height: 41upx;
			min-height: 41upx;
			padding: 0upx;
			margin-top: 0upx;
			margin-left: 16upx;
			float: left;
			background-color: #ffffff;
			text-align: left;
			border-radius: 0upx;
			color: #c8c8c8;
			font-size: 27upx;
			line-height: 41upx;
		}

		.certificationContent .certification_14 {
			white-space: normal;
			width: 697upx;
			height: 2upx;
			padding: 0upx;
			clear: both;
			margin-top: 25upx;
			margin-left: 25upx;
			float: left;
			background-color: #e1e1e1;
			text-align: left;
			border-radius: 0upx;
			font-size: 1upx;
			line-height: 2upx;
		}

		.certificationContent .certificationNoIdCard {
			white-space: normal;
			width: 495upx;
			height: 34upx;
			padding: 0upx;
			clear: both;
			margin-top: 672upx;
			margin-left: 157upx;
			float: left;
			text-align: left;
			border-radius: 0upx;
			font-size: 23upx;
			line-height: 34upx;
		}

		.certificationContent .certificationNoIdCard .certificationNoIdCardText {
			white-space: normal;
			width: 136upx;
			height: 34upx;
			padding: 0upx;
			margin-top: 0upx;
			margin-left: 0upx;
			float: left;
			background-color: #ffffff;
			text-align: left;
			border-radius: 0upx;
			color: #646464;
			font-size: 22upx;
			line-height: 34upx;
		}

		.certificationContent .certificationNoIdCard .certificationNoIdCardTextUpload {
			white-space: normal;
			width: 305upx;
			height: 34upx;
			padding: 0upx;
			margin-top: 0upx;
			margin-left: 0upx;
			float: left;
			background-color: #ffffff;
			text-align: left;
			border-radius: 0upx;
			color: #6ca0f0;
			font-size: 23upx;
			line-height: 34upx;
		}

		.certificationContent .certification_19 {
			white-space: normal;
			width: 589upx;
			height: 81upx;
			padding: 0upx;
			clear: both;
			margin-top: 31upx;
			margin-left: 79upx;
			float: left;
			background-color: #0080c0;
			text-align: center;
			justify-content: center;
			border-radius: 30upx;
			cursor: pointer;
			color: #ffffff;
			font-size: 31upx;
			line-height: 81upx;
		}

		.certificationContent .certificationTitle0 {
			white-space: normal;
			width: 520upx;
			height: 49upx;
			padding: 0upx;
			clear: both;
			margin-top: 52upx;
			margin-left: 185upx;
			float: left;
			text-align: left;
			border-radius: 0upx;
			font-size: 31upx;
			line-height: 49upx;
		}

		.certificationContent .certificationTitle0 .chkAgree {
			white-space: normal;
			width: auto;
			height: 32upx;
			padding: 0upx;
			margin-top: 8upx;
			margin-left: 0upx;
			float: left;
			text-align: left;
			border-radius: 0upx;
			font-size: 31upx;
			line-height: 32upx;
		}

		.certificationContent .certificationTitle0 .certificationTitle2 {
			white-space: normal;
			width: auto;
			height: 27upx;
			padding: 0upx;
			margin-top: 14upx;
			margin-left: 9upx;
			float: left;
			background-color: #ffffff;
			text-align: left;
			border-radius: 0upx;
			color: #c8c8c8;
			font-size: 25upx;
			line-height: 27upx;
		}

		.certificationContent .certificationTitle0 .certificationTitle3 {
			white-space: normal;
			width: auto;
			height: 29upx;
			padding: 0upx;
			margin-top: 13upx;
			margin-left: 5upx;
			float: left;
			background-color: #ffffff;
			text-align: left;
			border-radius: 0upx;
			color: #6ca0f0;
			font-size: 27upx;
			line-height: 29upx;
		}
</style>